@layout("/common/_container.html"){
<div class="layui-row layui-col-space15">
	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a>用户统计</a></legend>
    </fieldset>
	<div class="layui-col-md12">
		<div class="layui-row layui-col-space15">
          <!-- <div class="layui-col-md6">
          	<div class="layui-card">
	          <div class="layui-card-header">用户</div>
	          <div class="layui-card-body" style="padding: 42px 10px 42px 60px;" >
	          <div class="layui-left">
	          	<i class="layui-icon layui-icon-user" style="font-size: 40px"></i>
	          </div>
	          <div class="layui-right">
	          	<p class="layui-text-num">认证数：<i class="layui-text-count">${authCount}</i></p>
	            <p class="layui-text-num">总数：<i class="layui-text-count">${userCount}</i></p>
	          </div> 
	          </div>
	        </div>
          </div> -->
         <div class="layui-col-md4">
          	<div class="layui-card">
	          <div class="layui-card-header">用户认证数</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${authCount}<span class="layuiadmin-span-color">人</span></p>
	          </div>
	        </div>
         </div>
		 <div class="layui-col-md4">
          	<div class="layui-card">
	          <div class="layui-card-header">用户总数</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${userCount}<span class="layuiadmin-span-color">人</span></p>
	          </div>
	        </div>
          </div>
          <div class="layui-col-md4">
          	<div class="layui-card">
	          <div class="layui-card-header">围栏报警数</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font" id="warns-count"><span class="layuiadmin-span-color">条</span></p>
	          </div>
	        </div>
          </div>
          <div class="layui-col-md4">
          	<div class="layui-card">
	          <div class="layui-card-header">差分账号占比</div>
	          <div class="layui-card-body">
	            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview1">
                  <div carousel-item id="LAY-index-dataview1">
                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
	          </div>
	        </div>
          </div>
          <div class="layui-col-md8">
          	<div class="layui-card">
	          <div class="layui-card-header">用户数据统计
	            <div class="layui-btn-group layuiadmin-btn-group" id="heaparea1" >
	              <button class="curve layui-btn layui-btn-xs" id="now-year-heaparea1">日</button>
	              <button class="curve layui-btn layui-btn-primary layui-btn-xs" id="prev-year-heaparea1">月</button>
	              <button class="curve layui-btn layui-btn-primary layui-btn-xs" id="before-year-heaparea1">年</button>
	            </div>
	          </div>
	          <div class="layui-card-body">
	            <div class="layui-row">
	              <div class="layui-col-sm12">
	                  <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heaparea1">
			              <div carousel-item id="LAY-index-heaparea1">
			                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
			              </div>
			          </div>
	              </div>
	            </div>
	          </div>
	        </div>
          </div> 
          <fieldset class="layui-elem-field layui-field-title site-title">
		      <legend><a>服务统计</a></legend>
		  </fieldset>
		  <div class="layui-col-md12">
          	<div class="layui-card">
	          <div class="layui-card-header"> 最近更新</div>
	          <div class="layui-card-body">
	            <div class="layui-row layui-col-space10">

					<div class="layui-col-xs12 layui-col-sm3">
						<div class="layuiadmin-card-text">
							<div class="layui-text-top"><a href="javascript:void(0)">分米级服务(RTD)</a>
							</div>
							<div class="layui-card-body">
								<div class="layui-left">
									<i class="layui-icon layui-icon-website" style="font-size: 40px"></i>
								</div>
								<div class="layui-right">
									<p class="layui-text-num">账号数：<i class="layui-text-count">${rtdCount}</i></p>
									<p class="layui-text-num">待处理：<i class="layui-text-count">${toDoRtdCount}</i></p>
								</div>
							</div>
						</div>
					</div>

					<div class="layui-col-xs12 layui-col-sm3">
						<div class="layuiadmin-card-text">
							<div class="layui-text-top"><a href="javascript:void(0)">厘米级服务(RTK)</a>
							</div>
							<div class="layui-card-body">
								<div class="layui-left">
									<i class="layui-icon layui-icon-website" style="font-size: 40px"></i>
								</div>
								<div class="layui-right">
									<p class="layui-text-num">账号数：<i class="layui-text-count">${rtkCount}</i></p>
									<p class="layui-text-num">待处理：<i class="layui-text-count">${toDoRtkCount}</i></p>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs12 layui-col-sm3">
						<div class="layuiadmin-card-text">
							<div class="layui-text-top"><a href="javascript:void(0)">坐标转换服务</a>
							</div>
							<div class="layui-card-body">
								<div class="layui-left">
									<i class="layui-icon layui-icon-website" style="font-size: 40px"></i>
								</div>
								<div class="layui-right">
									<p class="layui-text-num">账号数：<i class="layui-text-count">${zbzhCount}</i></p>
									<p class="layui-text-num">待处理：<i class="layui-text-count">${zbzhCount}</i></p>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs12 layui-col-sm3">
						<div class="layuiadmin-card-text">
							<div class="layui-text-top"><a href="javascript:void(0)">基站数据服务</a>
							</div>
							<div class="layui-card-body">
								<div class="layui-left">
									<i class="layui-icon layui-icon-website" style="font-size: 40px"></i>
								</div>
								<div class="layui-right">
									<p class="layui-text-num">账号数：<i class="layui-text-count">${jzsjCount}</i></p>
									<p class="layui-text-num">待处理：<i class="layui-text-count">${jzsjCount}</i></p>
								</div>
							</div>
						</div>
					</div>

	            </div>
	          </div>
	        </div>
          </div>


			<!--<div class="layui-col-md4">-->
				<!--<div class="layui-card">-->
					<!--<div class="layui-card-header">各服务中用户占比</div>-->
					<!--<div class="layui-card-body">-->
						<!--<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview1">-->
							<!--<div carousel-item id="LAY-index-dataview2">-->
								<!--<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">服务账号统计
						<div class="layui-btn-group layuiadmin-btn-group" id="heaparea2">
							<button class="curve layui-btn layui-btn-xs" id="now-year-heaparea2">&nbsp;日&nbsp;</button>
							<button class="curve layui-btn layui-btn-primary layui-btn-xs" id="prev-year-heaparea2">&nbsp;月&nbsp;</button>
							<button class="curve layui-btn layui-btn-primary layui-btn-xs" id="before-year-heaparea2">&nbsp;年&nbsp;</button>
						</div>
					</div>
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-sm12">
								<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heaparea2">
									<div carousel-item id="LAY-index-heaparea2">
										<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<fieldset class="layui-elem-field layui-field-title site-title">
		      <legend><a>订单统计</a></legend>
		  </fieldset>
		  <div class="layui-col-md3">
          	<div class="layui-card">
	          <div class="layui-card-header">订单总数(已完成)</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${orderCount}<span class="layuiadmin-span-color">条</span></p>
	          </div>
	        </div>
          </div>
          <div class="layui-col-md3">
          	<div class="layui-card">
	          <div class="layui-card-header">订单总额(已完成)</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${orderPriceCount}<span class="layuiadmin-span-color">元</span></p>
	          </div>
	        </div>
          </div>
          <div class="layui-col-md3">
          	<div class="layui-card">
	          <div class="layui-card-header">待处理订单</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${toDoCount}<span class="layuiadmin-span-color">条</span></p>
	          </div>
	        </div>
          </div>
          <!--<div class="layui-col-md3">-->
          	<!--<div class="layui-card">-->
	          <!--<div class="layui-card-header">发票总数</div>-->
	          <!--<div class="layui-card-body layuiadmin-card-list">-->
	            <!--<p class="layuiadmin-big-font">${billCount}<span class="layuiadmin-span-color">张</span></p>-->
	          <!--</div>-->
	        <!--</div>-->
          <!--</div>-->
          <div class="layui-col-md3">
          	<div class="layui-card">
	          <div class="layui-card-header">待处理发票</div>
	          <div class="layui-card-body layuiadmin-card-list">
	            <p class="layuiadmin-big-font">${toDoBillCount}<span class="layuiadmin-span-color">张</span></p>
	          </div>
	        </div>
          </div>
          <!--<div class="layui-col-md4">-->
          	<!--<div class="layui-card">-->
	          <!--<div class="layui-card-header">各服务订单占比饼图</div>-->
	          <!--<div class="layui-card-body layuiadmin-card-list">-->
	            <!--<p class="layuiadmin-big-font">4<span class="layuiadmin-span-color">条</span></p>-->
	          <!--</div>-->
	        <!--</div>-->
          <!--</div>-->

		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">订单数据统计
					<div class="layui-btn-group layuiadmin-btn-group" id="heaparea3">
						<button class="curve layui-btn layui-btn-xs" id="now-year-heaparea3">&nbsp;日&nbsp;</button>
						<button class="curve layui-btn layui-btn-primary layui-btn-xs" id="prev-year-heaparea3">&nbsp;月&nbsp;</button>
						<button class="curve layui-btn layui-btn-primary layui-btn-xs" id="before-year-heaparea3">&nbsp;年&nbsp;</button>
					</div>
				</div>
				<div class="layui-card-body">
					<div class="layui-row">
						<div class="layui-col-sm12">
							<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heaparea3">
								<div carousel-item id="LAY-index-heaparea3">
									<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

        </div>
	</div>
</div>
<script>
layui.config({
	base: Feng.ctxPath + "/static/layuiadmin/" //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'senior','layer','table','laydate','form','carousel', 'echarts'],function(){
	
	//设置年份
	/* var date = new Date(),
	nowYear = date.getFullYear();
	$("#now-year").val(nowYear);
	$("#prev-year").val(nowYear-1);
	$("#before-year").val(nowYear-2); */

	//1日2月3年
	$("#now-year-heaparea1").val(1);
	$("#prev-year-heaparea1").val(2);
	$("#before-year-heaparea1").val(3);
	
	$("#now-year-heaparea2").val(1);
	$("#prev-year-heaparea2").val(2);
	$("#before-year-heaparea2").val(3);

	$("#now-year-heaparea3").val(1);
	$("#prev-year-heaparea3").val(2);
	$("#before-year-heaparea3").val(3);

	function initDateForPieChart(xdata, ydata){
		var echheaparea = [], heaparea  = [{
            title: {
                x: "center",
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: "vertical",
                x: "right",
                data: xdata
            },
            series: [{
                name: "占比情况",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: ydata
            }]
        }]
  	    ,elemheaparea = $('#LAY-index-dataview1').children('div')
	    ,renderheaparea = function(index){
	    echheaparea[index] = echarts.init(elemheaparea[index], layui.echartsTheme);
	    echheaparea[index].setOption(heaparea[index]);
	    window.onresize = echheaparea[index].resize;
	    };
	    if(!elemheaparea[0]) return;
	    renderheaparea(0);
	}
	
	var ajax = new $ax(Feng.ctxPath + "/blackboard/accountForPieChart", function (data) {
 		var xAxis = [];
 		var yAxis = data.data;
 		data.data.forEach(function(value,i){
 			xAxis.push(value.name);
 		})
 		console.log(xAxis)
 		console.log(yAxis)
 		initDateForPieChart(xAxis, yAxis)
      }, function (data) {
          Feng.error("显示失败!" + data.responseJSON.message + "!");
      });
      ajax.start();

	//围栏报警数量
    var ajax = new $ax(Feng.ctxPath + "/blackboard/warns/count", function (data) {
		$("#warns-count").html(data.count + '<span class="layuiadmin-span-color">条</span>');
    }, function (data) {
        Feng.error("显示失败!" + data.responseJSON.message + "!");
    },true);
    ajax.start();


    function initDateForCurve(xdata, ydata,type){
		var echheaparea = [], heaparea = [
	    {
	      tooltip : {
	        trigger: 'axis'
	      },
	      legend: {
	        data:[]
	      },
	      calculable : true,
	      xAxis : [
	        {
	          type : 'category',
	          name : '时',
	          boundaryGap : false,
	          data : xdata
	        }
	      ],
	      yAxis : [
	        {
	          type : 'value',
	          name : '用户注册量'
	        }
	      ],
	      series : [
	        {
	          name:'用户注册量',
	          type:'line',
	          stack: '总数',
	          itemStyle: {normal: {areaStyle: {type: 'default'}}},
	          data:ydata
	        }
	      ]
	    }
	  ]
	  ,elemheaparea = $('#LAY-index-heaparea1').children('div')
	  ,renderheaparea = function(index){
	    echheaparea[index] = echarts.init(elemheaparea[index], layui.echartsTheme);
	    echheaparea[index].setOption(heaparea[index]);
	    window.onresize = echheaparea[index].resize;
	  };
	  if(!elemheaparea[0]) return;
	  renderheaparea(0);
	}
    
    
    var ajax = new $ax(Feng.ctxPath + "/blackboard/userForCurve", function (data) {
		var xAxis = [];
		var yAxis = [];
		data.data.forEach(function(value,i){
			xAxis.push(value.xAxis);
			yAxis.push(value.yAxis);
		})
		initDateForCurve(xAxis, yAxis)
     }, function (data) {
         Feng.error("显示失败!" + data.responseJSON.message + "!");
     });
     ajax.set("type", 1);
     ajax.start();
	
     $('#heaparea1 .curve.layui-btn').on('click', function(){
    	 var thisVar = $(this);
    	 var ajax = new $ax(Feng.ctxPath + "/blackboard/userForCurve", function (data) {
   			var xAxis = [];
   			var yAxis = [];
   			data.data.forEach(function(value,i){
   				xAxis.push(value.xAxis);
   				yAxis.push(value.yAxis);
   			})
   			initDateForCurve(xAxis, yAxis);
   			$("#heaparea1 .curve.layui-btn").addClass("layui-btn-primary");
   			thisVar.removeClass("layui-btn-primary");
   	     }, function (data) {
   	         Feng.error("显示失败!" + data.responseJSON.message + "!");
   	     });
   		 ajax.set("type", thisVar.val());
   	     ajax.start();
     });


    // 服务账号统计折线图
    var ajax = new $ax(Feng.ctxPath + "/blackboard/accountForCurve", function (data) {
        var xAxis = [];
        var yAxis = [];
        data.data.forEach(function(value,i){
            xAxis.push(value.xAxis);
            yAxis.push(value.yAxis);
        })
        accountForCurve(xAxis, yAxis, 1);
    }, function (data) {
        Feng.error("显示失败!" + data.responseJSON.message + "!");
    });
    ajax.set("type", 1);
    ajax.start();

    $('#heaparea2 .curve.layui-btn').on('click', function(){
        var thisVar = $(this);
        var ajax = new $ax(Feng.ctxPath + "/blackboard/accountForCurve", function (data) {
            var xAxis = [];
            var yAxis = [];
            data.data.forEach(function(value,i){
                xAxis.push(value.xAxis);
                yAxis.push(value.yAxis);
            })
            accountForCurve(xAxis, yAxis,thisVar.val());
            $("#heaparea2 .curve.layui-btn").addClass("layui-btn-primary");
            thisVar.removeClass("layui-btn-primary");
        }, function (data) {
            Feng.error("显示失败!" + data.responseJSON.message + "!");
        });
        ajax.set("type", thisVar.val());
        ajax.start();
    });

    // 服务账号统计折线图
    function accountForCurve(xdata, ydata, type){
        var xName = '时';
        if (type == '2') {
            xName = '日';
        }else if (type == '3') {
            xName = '月份';
        }
        var echheaparea = [], heaparea = [
            {
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[]
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name : xName,
                        boundaryGap : false,
                        data : xdata
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name : '账号注册量'
                    }
                ],
                series : [
                    {
                        name:'账号注册量',
                        type:'line',
                        stack: '总数',
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:ydata
                    }
                ]
            }
        ]
            ,elemheaparea = $('#LAY-index-heaparea2').children('div')
            ,renderheaparea = function(index){
            echheaparea[index] = echarts.init(elemheaparea[index], layui.echartsTheme);
            echheaparea[index].setOption(heaparea[index]);
            window.onresize = echheaparea[index].resize;
        };
        if(!elemheaparea[0]) return;
        renderheaparea(0);
    }

    // 订单数据统计折线图
    var ajax = new $ax(Feng.ctxPath + "/blackboard/orderForCurve", function (data) {
        var xAxis = [];
        var yAxis = [];
        data.data.forEach(function(value,i){
            xAxis.push(value.xAxis);
            yAxis.push(value.yAxis);
        })
        orderForCurve(xAxis, yAxis, 1)
    }, function (data) {
        Feng.error("显示失败!" + data.responseJSON.message + "!");
    });
    ajax.set("type", 1);
    ajax.start();

    $('#heaparea3 .curve.layui-btn').on('click', function(){
        var thisVar = $(this);
        var ajax = new $ax(Feng.ctxPath + "/blackboard/orderForCurve", function (data) {
            var xAxis = [];
            var yAxis = [];
            data.data.forEach(function(value,i){
                xAxis.push(value.xAxis);
                yAxis.push(value.yAxis);
            })
            orderForCurve(xAxis, yAxis,thisVar.val());
            $("#heaparea3 .curve.layui-btn").addClass("layui-btn-primary");
            thisVar.removeClass("layui-btn-primary");
        }, function (data) {
            Feng.error("显示失败!" + data.responseJSON.message + "!");
        });
        ajax.set("type", thisVar.val());
        ajax.start();
    });

    // 订单服务统计折线图
    function orderForCurve(xdata, ydata, type){
        var xName = '时';
        if (type == '2') {
            xName = '日';
        }else if (type == '3') {
            xName = '月份';
        }
        var echheaparea = [], heaparea = [
            {
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[]
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name : xName,
                        boundaryGap : false,
                        data : xdata
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name : '订单数量'
                    }
                ],
                series : [
                    {
                        name:'订单数量',
                        type:'line',
                        stack: '总数',
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:ydata
                    }
                ]
            }
        ]
            ,elemheaparea = $('#LAY-index-heaparea3').children('div')
            ,renderheaparea = function(index){
            echheaparea[index] = echarts.init(elemheaparea[index], layui.echartsTheme);
            echheaparea[index].setOption(heaparea[index]);
            window.onresize = echheaparea[index].resize;
        };
        if(!elemheaparea[0]) return;
        renderheaparea(0);
    }



});
</script>
@}
